<template>
    <div class="box">
        <h3>组合式API的生命周期</h3>
        <p ref="pDom">
            1. 组合式api生命周期钩子函数的使用方式:
                在选项式生命周期名称前增加on关键字，以方法方式调用
        </p>
        <pre>
            import { onBeforeMount } from "vue";

            onBeforeMount(function(){
                console.log("LifePage 准备挂载")
            })
        </pre>
        <br>
        <p>2.onBeforeCreate,onCreated生命周期钩子函数，不存在组合式API的调用规则</p>
        <pre>组合式api中的方法直接调用，等同于选项式API created 生命周期的调用</pre>
        <pre>{{ types }}</pre>
    </div>
</template>

<!-- <script>
export default {
    mounted(){

    }
}
</script> -->

<script setup>
import { onBeforeCreate,onCreated,onBeforeMount,onMounted,ref } from "vue";
import api from "@/index/api";
console.log(onBeforeCreate,onCreated)

const pDom = ref();

// function printTest(){
//     console.log("printTest")
// }
// printTest();
let types = ref([])
async function initTypes(){
    types.value = await api.loadTypes()
}
// console.log(initTypes)
initTypes();

onBeforeMount(function(){
    console.log("LifePage 准备挂载")
    console.log(pDom.value)
})

onMounted(function(){
    console.log("LifePage 组件被挂载")
    console.log(pDom.value)
})

</script>

<style lang="sass" scoped>

</style>